const buttons = document.querySelectorAll('.ripple')

buttons.forEach(button => {
  button.addEventListener('click', function (e) {
    // 3.① 先：获取鼠标相对 ->浏览器窗口 的具体坐标：
    const x = e.pageX
    const y = e.pageY

    // 3.② 再：获取当前按钮相对于 ->浏览器窗口 距离左和顶 的视口距离：
    const buttonTop = e.target.offsetTop
    const buttonLeft = e.target.offsetLeft
  
    // 3.③ 通过：①-② ->得出<当前鼠标>相对于[按钮内部]的具体位置：
    const xInside = x - buttonLeft
    const yInside = y - buttonTop

    // 3.2 创建一个节点<span>：
    const circle = document.createElement('span')
    circle.classList.add('circle')

    // 3.3 图形效果 ->以当前鼠标点击的位置, 进行显示动画：
    circle.style.top = yInside + 'px'
    circle.style.left = xInside + 'px'

    // 3.4 this指向 ->button(触发者)
    this.appendChild(circle)
  
    // 3.end 一段时间后, 将 圆形图形 销毁：
    setTimeout(() => circle.remove(), 500)
  })
})